<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h2>表单请求</h2>
<form action="abc/login.do" method="post"
      enctype="application/x-www-form-urlencoded">
    用户名:<input name="name">
    密码:<input name="pwd">
    <button>提交</button>
</form>

<h2>文件上传请求</h2>
<form action="abc/login.do" method="post"
      enctype="multipart/form-data">
    用户名:<input name="name">
    密码:<input name="pwd">
    <button>提交</button>
</form>

<h2>普通GET请求</h2>
<form action="abc/login.do">
    用户名:<input name="name">
    密码:<input name="pwd">
    <button>提交</button>
</form>

<h2>请求参数自动装箱</h2>
<form action="reg1" method="post">
    用户名:<input name="name"><br>
    密码:<input name="pwd"><br>
    年龄:<input name="age" type="number"><br>
    邮箱:<input name="email"><br>
    性别:<input name="gender" type="radio" value="男">男
        <input name="gender" type="radio" value="女">女<br>
    爱好:<input name="likes" type="checkbox" value="篮球">篮球
        <input name="likes" type="checkbox" value="手游">手游
        <input name="likes" type="checkbox" value="唱歌">唱歌
        <input name="likes" type="checkbox" value="跳舞">跳舞<br>
    父亲:<input name="father.name">
        年龄: <input name="father.age" type="number"><br>
    母亲:<input name="mather.name">
        年龄: <input name="mather.age" type="number"><br>
    朋友1:<input name="friends.name"><br>
    朋友2:<input name="friends.name"><br>
    朋友3:<input name="friends.name"><br>
    <button>提交</button>
</form>

<h2>AJAX请求参数自动装箱</h2>
<form action="reg1" method="post" id="app">
    用户名:<input v-model="user.name"><br>
    密码:<input v-model="user.pwd"><br>
    年龄:<input v-model="user.age" type="number"><br>
    邮箱:<input v-model="user.email"><br>
    性别:<input v-model="user.gender" type="radio" value="男">男
    <input v-model="user.gender" type="radio" value="女">女<br>
    爱好:<input v-model="user.likes" type="checkbox" value="篮球">篮球
    <input v-model="user.likes" type="checkbox" value="手游">手游
    <input v-model="user.likes" type="checkbox" value="唱歌">唱歌
    <input v-model="user.likes" type="checkbox" value="跳舞">跳舞<br>
    父亲:<input v-model="user.father.name">
    年龄: <input v-model="user.father.age" type="number"><br>
    母亲:<input v-model="user.mather.name">
    年龄: <input v-model="user.mather.age" type="number"><br>
    朋友1:<input v-model="user.friends[0].name"><br>
    朋友2:<input v-model="user.friends[1].name"><br>
    朋友3:<input v-model="user.friends[2].name"><br>
    <button @click.prevent="reg1">提交</button>
    <div>{{ret}}</div>
</form>
<script>
    var v = new Vue({
        el:"#app",
        data: {
            user :{
                likes:[],
                father:{},
                mather:{},
                friends:[{},{},{}]
            },
            ret:""
        },
        methods:{
            reg1(){
                axios.post("reg2", this.user).then(res=>{
                    this.ret = JSON.stringify(res.data);
                });
            }
        }

    })
</script>


<h2>用户注册 ( 表单验证 )</h2>
<style>span{color:red}</style>
<form method="post" id="app1">
    用户名:<input v-model="user.name"><span v-if="errors.nameMsg">{{errors.nameMsg.join(",")}}</span><br>
    密码:<input v-model="user.pwd"><span v-if="errors.pwdMsg">{{errors.pwdMsg.join(",")}}</span><br>
    年龄:<input v-model="user.age" type="number"><span v-if="errors.ageMsg">{{errors.ageMsg.join(",")}}</span><br>
    邮箱:<input v-model="user.email"><span v-if="errors.emailMsg">{{errors.emailMsg.join(",")}}</span><br>
    性别:<input v-model="user.gender" type="radio" value="男">男
    <input v-model="user.gender" type="radio" value="女">女
    <span v-if="errors.genderMsg">{{errors.genderMsg.join(",")}}</span><br>
    爱好:<input v-model="user.likes" type="checkbox" value="篮球">篮球
    <input v-model="user.likes" type="checkbox" value="手游">手游
    <input v-model="user.likes" type="checkbox" value="唱歌">唱歌
    <input v-model="user.likes" type="checkbox" value="跳舞">跳舞
    <span v-if="errors.likesMsg">{{errors.likesMsg.join(",")}}</span><br>
    <button @click.prevent="reg1">提交</button>
</form>
<script>
    var v = new Vue({
        el:"#app1",
        data: {
            user :{
                likes:[],
                father:{},
                mather:{},
                friends:[{},{},{}]
            },
            errors:{

            }
        },
        methods:{
            reg1(){
                axios.post("register.do", this.user).then(res=>{
                    if(res.data.code == 0){
                        // 重置报错信息
                        this.errors = {};
                        res.data.data.forEach(e=>{
                            // e.field   字符串  名称
                            if ( ! this.errors[e.field + "Msg"]) {
                                this.errors[e.field + "Msg"] = []; // 错误消息数组
                            }
                            // 将报错信息存入数组
                            this.errors[e.field + "Msg"].push(e.defaultMessage);
                        });
                    }
                });
            }
        }

    })
</script>


<h2>文件上传</h2>
<div id="app2">
    <img :src="imgSrc" width="200px" onclick="ff.click()"><br>
    <input type="file" id="ff" style="display: none" @change="upload">
    <button @click="upload" style="display: none">上传</button>
</div>
<script>
    var v = new Vue({
        el : "#app2",
        data : {
            imgSrc: "https://img0.baidu.com/it/u=2264664417,2109988758&fm=253&fmt=auto&app=138&f=PNG?w=265&h=265"
        },
        methods:{
            upload(){
                var fd = new FormData();
                fd.append("file" , ff.files[0]);
                axios.post("upload", fd).then(res=>{
                    if(res.data.code){
                        this.imgSrc = res.data.data;
                    }
                })
            }
        }
    })
</script>




</body>
</html>